<template>
  <!-- 首页文件 -->
  <div class="index">
    <module-header></module-header>
    <div class="swiper-box">
      <div class="swiper-center">
        <p class="swiper-hint">
          <span>安全</span>
          <span>稳定</span>
          <span>可信</span>
        </p>
        <p class="swiper-title">世界领先的数字资产交易平台</p>
        <com-swiper class="swiper-body"></com-swiper>
      </div>
    </div>
    <div class="recommend-coin">
      <div class="card" v-for="(item,index) in recommendList" :key="index">
        <div class="info-box">
          <p class="title">{{item.CoinName}}指数</p>
          <p
            class="price"
            :class="item.Increase*1>=0?'dp-green-text':'dp-red-text'"
          >￥{{item.NewRmb}}</p>
          <span
            class="rose"
            :class="item.Increase*1>=0?'dp-green-bgc':'dp-red-bgc'"
          >{{item.Increase}}%</span>
        </div>
        <div class="charts-box">
          <div class="charts" :id="'recommend_'+index">
            {{recommendCreateLine('recommend_'+index)}}
            {{item.Charts.toString()}}
          </div>
        </div>
      </div>
    </div>
    <div class="home-tab-ticker">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="新币榜" name="first">
          <el-table
            :data="dataList"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            v-loading="loading"
          >
            <el-table-column label="交易对" sortable width="180" sort-by="row">
              <template slot-scope="scope">{{scope.row.PairBefo}}/{{scope.row.PairBase}}</template>
            </el-table-column>
            <el-table-column label="最新价" sortable sort-by="NewPrice" width="180">
              <template slot-scope="scope">
                {{scope.row.NewPrice}}
                <span class="price-column">￥{{scope.row.NewRmb}}</span>
              </template>
            </el-table-column>
            <el-table-column label="24H涨跌幅" sortable sort-by="Increase">
              <template slot-scope="scope">
                <span
                  :class="scope.row.Increase*1>=0?'dp-green-text':'dp-red-text'"
                >{{scope.row.Increase}}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="DayLow" label="24H最低" sortable></el-table-column>
            <el-table-column prop="DayHigh" label="24H最高" sortable></el-table-column>
            <el-table-column prop="DayCount" label="24H成交量" sortable></el-table-column>
            <el-table-column prop="pairid" label="数据图">
              <template slot-scope="scope">
                <span
                  class="charts_line"
                  :id="'index_crease'+scope.$index+1"
                >{{createLine('index_crease'+scope.$index+1)}}{{scope.row.Charts.toString()}}</span>
              </template>
            </el-table-column>
            <el-table-column width="60" prop="操作" label="操作" :formatter="formatter">
              <router-link to>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconfeiji" />
                </svg>
              </router-link>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="24H涨幅榜" name="second">
          <el-table
            :data="dataList"
            style="width: 100%"
            :default-sort="{prop: 'date', order: 'descending'}"
            v-loading="loading"
          >
            <el-table-column label="交易对" sortable width="180" sort-by="row">
              <template slot-scope="scope">{{scope.row.PairBefo}}/{{scope.row.PairBase}}</template>
            </el-table-column>
            <el-table-column label="最新价" sortable sort-by="NewPrice" width="180">
              <template slot-scope="scope">
                {{scope.row.NewPrice}}
                <span class="price-column">￥{{scope.row.NewRmb}}</span>
              </template>
            </el-table-column>
            <el-table-column label="24H涨跌幅" sortable sort-by="Increase">
              <template slot-scope="scope">
                <span
                  :class="scope.row.Increase*1>=0?'dp-green-text':'dp-red-text'"
                >{{scope.row.Increase}}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="DayLow" label="24H最低" sortable></el-table-column>
            <el-table-column prop="DayHigh" label="24H最高" sortable></el-table-column>
            <el-table-column prop="DayCount" label="24H成交量" sortable></el-table-column>
            <el-table-column prop="pairid" label="数据图">
              <template slot-scope="scope">
                <span
                  class="charts_line"
                  :id="'index_rose'+scope.$index+1"
                >{{createLine('index_rose'+scope.$index+1)}}{{scope.row.Charts.toString()}}</span>
              </template>
            </el-table-column>
            <el-table-column width="60" prop="操作" label="操作" :formatter="formatter">
              <router-link to>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#iconfeiji" />
                </svg>
              </router-link>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 关于我们  https://www.btb.io/ -->
    <div class="about-box">
      <div class="header">
        <h1>关于我们</h1>
        <span>ABOUT US</span>
      </div>
      <div class="about-content">
        <div class="item">
          <transition name="animations_left">
            <div class="title" v-if="aboutCurrent=='card1'">布局全球化</div>
          </transition>
          <transition name="animations_right">
            <div
              class="text"
              v-if="aboutCurrent=='card1'"
            >运营策略上布局全球，运营中心分布设在新加坡、香港、韩国、泰国、菲律宾、马来西亚等国家；在产品上，提供多国家语言版本，服务全球用户。</div>
          </transition>
        </div>
        <div class="item">
          <transition name="animations_left">
            <div class="title" v-if="aboutCurrent=='card2'">资产安全化</div>
          </transition>
          <transition name="animations_right">
            <div
              class="text"
              v-if="aboutCurrent=='card2'"
            >从专业技术层面实现多重交易加密，98%数字资产采用冷钱包离线存储，保障资产安全；在资产项目把关、资产安全保障上设定了严格的标准化风控体系，投资者所有交易情况及波动指数均公开透明，通过平台即可对交易走势了如指掌</div>
          </transition>
        </div>
        <div class="item">
          <transition name="animations_left">
            <div class="title" v-if="aboutCurrent=='card3'">项目优质化</div>
          </transition>
          <transition name="animations_right">
            <div
              class="text"
              v-if="aboutCurrent=='card3'"
            >以市场的主流区块链数字资产为主，并将实际落地的应用区块链Token为核心做价值投资，严选优质应用落地项目，杜绝一切不良的资产等泡沫项目。我们拥有一整套严谨、专业的风控审核体系为用户保驾护航</div>
          </transition>
        </div>
        <div class="item">
          <transition name="animations_left">
            <div class="title" v-if="aboutCurrent=='card4'">团队专业化</div>
          </transition>
          <transition name="animations_right">
            <div
              class="text"
              v-if="aboutCurrent=='card4'"
            >团队达规模100多人，均为互联网和传统金融行业的资深人士，专业度和权威性居行业前列。技术团队对高并发、服务器安全运维有充足的实操经验，保障了交易平台的安全、稳定、高效运行。</div>
          </transition>
        </div>
      </div>
      <div class="card">
        <div class="item" @mouseenter="aboutCardHover('card1')">
          <div class="item-list1 default">
            <p class="title">布局全球化</p>
            <p class="lines"></p>
          </div>
          <div class="detail">
            <img src="../../../public/img/dsj.png" alt />
            <p class="title">布局全球化</p>
            <p class="lines"></p>
          </div>
        </div>

        <div class="item" @mouseenter="aboutCardHover('card2')">
          <div class="item-list2 default">
            <p class="title">资产安全化</p>
            <p class="lines"></p>
          </div>
          <div class="detail">
            <img src="../../../public/img/dsj.png" alt />
            <p class="title">资产安全化</p>
            <p class="lines"></p>
          </div>
        </div>
        <div class="item" @mouseenter="aboutCardHover('card3')">
          <div class="item-list3 default">
            <p class="title">项目优质化</p>
            <p class="lines"></p>
          </div>
          <div class="detail">
            <img src="../../../public/img/dsj.png" alt />
            <p class="title">项目优质化</p>
            <p class="lines"></p>
          </div>
        </div>
        <div class="item" @mouseenter="aboutCardHover('card4')">
          <div class="item-list4 default">
            <p class="title">团队专业化</p>
            <p class="lines"></p>
          </div>
          <div class="detail">
            <img src="../../../public/img/dsj.png" alt />
            <p class="title">团队专业化</p>
            <p class="lines"></p>
          </div>
        </div>
      </div>
    </div>
    <!-- 下载部分 https://www.huobi.co/zh-cn/ -->
    <div class="dow-box">
      <div class="dow-center">
        <p class="block_title">随时随地 多平台终端交易</p>
        <p class="sub-title">覆盖iOS、Android、Windows、Mac多个平台，支持全业务功能</p>
        <ul class="client_list">
          <li>
            <a :href="dowUrl.windows.url">
              <i class="iconfont icon-windows"></i>
              Windows 下载
            </a>
          </li>
          <li>
            <a :href="dowUrl.macos.url">
              <i class="iconfont icon-mac1"></i>
              Mac OS 下载
            </a>
          </li>
          <li>
            <a :href="dowUrl.iphone.url">
              <i class="iconfont icon-iconziti48"></i>
              iPhone 下载
            </a>
          </li>
          <li>
            <a :href="dowUrl.h5url.url">
              <i class="iconfont icon-anzhuo1"></i>
              Android 下载
            </a>
          </li>
          <li class="qrcode">
            <div class="qr">
              <canvas id="dowcanvas"></canvas>
            </div>
            <p>IOS & Android 扫码下载</p>
          </li>
        </ul>
        <div class="moons_mind">
          <div class="mac can_animate">
            <transition name="mac-admin">
              <img src="../../../public/img/87c7a04.svg" alt />
            </transition>
          </div>
          <div class="iphone"></div>
        </div>
      </div>
    </div>
    <module-footer></module-footer>
  </div>
</template>
<script>
import ModuleHeader from "../page-module-public/public-header.vue";
import ModuleFooter from "../page-module-public/public-footer.vue";
import ComSwiper from "./com-swiper.vue";
import QRCode from "qrcode"; //引入生成二维码组件

export default {
  data() {
    return {
      activeName: "first",
      recommendList: [],
      dataList: [],
      isShow: false,
      aboutCurrent: "card1",
      loading: false,
      dowUrl: {
        windows: {
          url: "#",
          update: false,
          version: 0
        },
        macos: {
          url: "#",
          update: false,
          version: 0
        },
        iphone: {
          url: "#",
          update: false,
          version: 0
        },
        android: {
          url: "#",
          update: false,
          version: 0
        },
        h5url: {
          url: "#"
        }
      },
      chartsDom: []
    };
  },
  components: {
    ModuleHeader,
    ComSwiper,
    ModuleFooter
  },

  methods: {
    /*
     * @description 推荐币种请求
     * @param null
     */
    reqRecommend() {
      this.$api.index.recommend().then(res => {
        if (res.data.code == 200) {
          this.recommendList = res.data.data.RecommendList;

          console.log("请求到的推荐币种数据", res.data.data.RecommendList);
        }
      });
    },
    /*
     * @description 新币榜请求
     * @param null
     */
    reqNewList() {
      this.loading = true;
      this.$api.index.newList().then(res => {
        if (res.data.code == 200) {
          console.log("接受到的数据1", res.data.data);
          this.loading = false;
          this.dataList = res.data.data.RecommendList;
          console.log(this.dataList);
        }
      });
    },
    /*
     * @description 24H涨幅榜
     * @param null
     */
    reqDayAmount() {
      this.loading = true;
      this.$api.index.dayaAount().then(res => {
        if (res.data.code == 200) {
          console.log("接受到的数据2", res.data.data);
          this.loading = false;
          this.dataList = res.data.data.RecommendList;
        }
      });
    },
    /*
     * @description 下载地址请求
     * @param null
     */
    reqAppUrl() {
      this.$api.index.utilDow().then(res => {
        if (res.data.code == 200) {
          this.dowUrl = res.data.data;
          this.createQR();
        }
      });
    },
    /*
     * @description tab切换函数
     * @param first，second
     */
    handleClick(tab, event) {
      if (this.activeName == "first") {
        this.reqNewList();
      } else {
        this.reqDayAmount();
      }
    },
    /*
     * @description 表格列表点击函数
     * @param row，column
     */
    formatter(row, column) {
      return row.address;
    },
    /*
     *card 悬浮事件
     */
    aboutCardHover(val) {
      this.aboutCurrent = val;
    },
    /*
     * @description 二维码生成函数
     * @param dom
     */
    createQR() {
      this.QueryDetail = this.dowUrl.h5url.url;
      var canvas = document.getElementById("dowcanvas");
      QRCode.toCanvas(canvas, this.QueryDetail, function(error) {
        if (error) console.error(error);
      });
    },
    /*
     * 列表charts函数
     */
    createLine(e) {
      setTimeout(() => {
        $("#" + e).peity("line", { width: 80 });
      }, 300);
    },
    /*
     * 推荐币种charts函数
     */
    recommendCreateLine(e) {
      $("#" + e).peity("line", {
        width: 196,
        height: 70,
        fill: "#f9f9f9",
        stroke: "#e9e9e9"
      });
    }
  },

  computed: {},

  created() {
    this.reqNewList();
    this.reqAppUrl();
    this.reqRecommend();
  },

  mounted() {
    $("#demo").peity("line");
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/style/public/public.less";
.b {
  border: solid 1px red;
}
// 状态参数

.index {
  //  background-color: @bgc-color;
  width: 100%;
  min-width: 1180px;
  .swiper-box {
    height: 400px;
    width: 100%;
    padding-top: 48px;

    background: linear-gradient(90deg, #041636, #0b2758);
    .swiper-center {
      width: 1180px;
      margin: 0 auto;
      .swiper-hint {
        font-size: 24px;
        font-weight: 300;
        height: 36px;
        color: #fff;
        span {
          margin-right: 8px;
        }
      }
      .swiper-title {
        height: 56px;
        font-size: 36px;
        font-weight: 300;
        line-height: 1.56;
        letter-spacing: normal;
        color: #fff;
        margin-bottom: 42px;
      }
    }
  }
  .recommend-coin {
    width: 1180px;
    margin: 25px auto;
    display: flex;
    justify-content: space-between;
    .card {
      width: 220px;
      height: 100px;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
      position: relative;
      cursor: pointer;
      background-size: 220px 100px;
      background-position: 50% 50%;
      .info-box {
        z-index: 2;
        position: relative;
        padding: 8px 0 0 16px;
        .title {
          line-height: 1.5;
          font-size: 16px;
          height: 24px;
          color: rgba(0, 0, 0, 0.85);
        }
        .price {
          height: 36px;
          font-size: 24px;
          line-height: 1.5;
        }
        .rose {
          font-size: 12px;
          font-weight: 500;
          line-height: 18px;
          height: 18px;
          text-align: center;
          color: #fff;
          padding: 3px 8px;
          border-radius: 4px;
          margin-top: 6px;
        }
      }
      .charts {
        display: none;
      }
      .charts-box {
        position: absolute;
        bottom: -4px;
        z-index: 1;
      }
    }
    .card:hover {
      box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
    }
  }
  .home-tab-ticker {
    width: 1180px;
    min-height: 300px;
    border-bottom: solid 1px #ebedf0;
    margin: 0 auto;
    // 被选中的样式isactive
    .is-active {
      box-shadow: inset 0 -3px 0 0 #5795f1;
      color: #5795f1;
      cursor: default;
    }
    .tb-bar {
      font-size: 16px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.65);
      line-height: 41px;
      cursor: pointer;
      padding: 8px;
    }
    .tb-bar:nth-of-type(1) {
      margin-right: 24px;
    }
    .price-column {
      margin-left: 6px;
      color: rgba(0, 0, 0, 0.43);
      font-size: 12px;
    }
    .charts_line {
      font-size: 0px;
    }
    .icon {
      width: 20px;
      height: 20px;
    }
  }
  .about-box {
    padding: 60px 0;
    .header {
      padding: 30px 0;
    }
    width: 1180px;
    margin: 0 auto;

    color: #192236;
    h1 {
      line-height: 49px;
    }
    span {
      font-size: 18px;
      font-weight: 400;
      line-height: 24px;
    }
    .about-content {
      position: relative;
      overflow: hidden;
      height: 158px;
      .title {
        width: 268px;
        font-size: 20px;
        line-height: 34px;
        text-align: center;
      }
      .text {
        width: 787px;
        margin-left: 70px;

        line-height: 18px;
        color: rgba(73, 80, 96, 1);
        font-size: 14px;
        font-weight: 400;
        padding-right: 60px;
      }
      // 左侧标题动画
      .animations_left-leave,
      .animations_left-enter-to {
        transform: translateX(0px);
        opacity: 1;
        transition: all 1s;
      }
      .animations_left-enter,
      .animations_left-leave-to {
        opacity: 0;
        transform: translateX(-50px);
      }
      // 右侧描述动画
      .animations_right-enter,
      .animations_right-leave-to {
        opacity: 0;
        transform: translateX(50px);
      }
      .animations_right-leave,
      .animations_right-enter-to {
        transform: translateX(0px);
        opacity: 1;
        transition: all 1s;
      }

      .item {
        position: absolute;
        left: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 50px 0;
        width: 100%;
      }
      .item:nth-of-type(1) .title {
        background: url("../../../public/img/global.png") center no-repeat;
      }
      .item:nth-of-type(2) .title {
        background: url("../../../public/img/acurity.png") center no-repeat;
      }
      .item:nth-of-type(3) .title {
        background: url("../../../public/img/quality.png") center no-repeat;
      }
      .item:nth-of-type(4) .title {
        background: url("../../../public/img/apec.png") center no-repeat;
      }
    }
    .card {
      display: flex;
      height: 130px;
      .item {
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        cursor: pointer;
        position: relative;
      }
      .item-list1,
      .item-list2,
      .item-list3,
      .item-list4 {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        position: relative;
        color: rgba(222, 238, 255, 1);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
      }
      .item-list1 {
        background: url("../../../public/img/earth.png") 50% no-repeat;
        background-size: auto;
        background-size: 53%;
        background-color: #081022;
      }
      .item-list2 {
        background: url("../../../public/img/zc.png") 50% no-repeat;
        background-size: auto;
        background-size: 53%;
        background-color: #6e7c9a;
      }
      .item-list3 {
        background: url("../../../public/img/xm.png") 50% no-repeat;
        background-size: auto;
        background-size: 53%;
        background-color: #081022;
      }
      .item-list4 {
        background: url("../../../public/img/team.png") 50% no-repeat;
        background-size: auto;
        background-size: 53%;
        background-color: #6e7c9a;
      }
      .lines {
        width: 19px;
        height: 2px;
        background: rgba(255, 188, 6, 1);
        margin-top: 5px;
      }
      // 隐藏的块
      .detail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 0 53px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        visibility: hidden;
        img {
          position: absolute;
          top: 0px;
          height: auto;
        }
      }
      .item:nth-of-type(1):hover .detail {
        visibility: visible;
      }
      .item:nth-of-type(2):hover .detail {
        visibility: visible;
      }
      .item:nth-of-type(3):hover .detail {
        visibility: visible;
      }
      .item:nth-of-type(4):hover .detail {
        visibility: visible;
      }
    }
  }
  .dow-box {
    width: 100%;
    background: linear-gradient(90deg, #1e357e, #263b86);
    .dow-center {
      padding-top: 126px;
      text-align: center;
      color: #fff;
      width: 1180px;
      height: 860px;
      margin: 0 auto;
      .block_title {
        font-size: 30px;
        margin-bottom: 22px;
        // color: #fff;
      }
      .sub-title {
        font-size: 16px;
        margin-bottom: 60px;
      }
      .client_list {
        max-width: 260px;
        display: flex;
        text-align: left;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        float: left;
        margin-left: 52px;
        li {
          min-width: 172px;
          font-size: 18px;
          margin-bottom: 14px;
          a {
            min-width: 172px;
            height: 64px;
            display: block;
            color: #f2f6fa;
            padding: 16px 10px;
            line-height: 32px;
            position: relative;
            font-size: 14px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid transparent;
            border-radius: 2px;
            overflow: hidden;
            white-space: nowrap;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            .iconfont {
              display: inline-block;
              height: 32px;
              width: 32px;
              margin: 0 10px 0 0;
              text-align: center;
              vertical-align: top;
              border-radius: 50%;
              background: #fff;
              position: relative;
              overflow: hidden;
              color: #357ce1;
              line-height: 32px;
            }
          }
          .qr {
            width: 172px;
            height: 172px;
            padding: 10px;
            border: solid 1px #357ce1;
          }
        }
        #dowcanvas {
          width: 152px !important;
          height: 152px !important;
        }
      }
      li:hover {
        background-color: #2d448b;
        outline: solid 1px #357ce1;
      }
      li:nth-last-of-type(1):hover {
        outline: none;
        background: linear-gradient(90deg, #1e357e, #263b86);
      }
      .qrcode p {
        font-size: 12px;
        text-align: center;
        line-height: 22px;
        color: rgb(223, 219, 219);
      }
      .moons_mind {
        width: 836px;
        margin: 0 26px 0 0;
        position: relative;
        float: right;
        height: 480px;
        .mac {
          width: 750px;
          height: 480px;
          border-radius: 3px 3px 0 0;
          position: absolute;
          top: 0;
          left: 0;

          img {
            width: 750px;
            height: 480px;
          }
        }
        // web 图片的动画
        .mac-admin-enter,
        .mac-admin-leave-to {
          opacity: 0;
          transform: translateY(30%);
        }
        .mac-admin-leave,
        .mac-admin-enter-to {
          opacity: 1;
          transform: translateY(0);
          transition: all 0.5s;
        }
        .iphone {
          float: right;
          background-image: url("../../../public/img/index_phone.svg");
          background-size: 187px 375px;
          width: 187px;
          height: 375px;
          z-index: 1;
          position: absolute;
          right: 0;
          bottom: -20px;
        }
      }
    }
  }
}
</style>
